<template>
  <view class="popup-content">
    <view class="goods-box">
      <view>
        <view class="goods-name" v-if="userData.product_name">{{ userData.product_name }}</view>
        <view class="goods-price" v-if="userData.sale_price">￥{{ userData.sale_price }}</view>
      </view>
      <view class="goods-img">
        <image :src="userData.product_img" class="img"></image>
      </view>
    </view>
    <view class="order-num">订单编号：{{ userData.order_id }}</view>
    <view class="order-title">创建时间：{{ userData.create_time }}</view>
    <view class="line"></view>
    <!-- <view class="user-box">
      <view class="user-img">
        <image :src="userData.avatar" class="avatar-img"></image>
      </view>
      <view>
        <view class="user-txt">昵称</view>
        <view>
          <u--input v-model="userData.nickname" class="input-txt" :disabled="true" disabledColor="#F5F1F4"></u--input>
        </view>
      </view>
      <view>
        <view class="user-txt">用户ID</view>
        <view>
          <u--input v-model="userData.user_id" class="input-txt" :disabled="true" disabledColor="#FCEBEC"></u--input>
        </view>
      </view>
      <view>
        <view class="user-txt">电话</view>
        <view>
          <u--input v-model="userData.mobile" class="input-txt" :disabled="true" disabledColor="#F5F1F4"></u--input>
        </view>
      </view>
      <view>
        <view class="user-txt">视频号ID</view>
        <view>
          <u--input v-model="userData.videoid" class="input-txt" :disabled="true" disabledColor="#FCEBEC"></u--input>
        </view>
      </view>
      <view>
        <view class="user-txt">性别</view>
        <view>
          <u--input v-model="userData.sex" :disabled="true" disabledColor="#F5F1F4"></u--input>
        </view>
      </view>
    </view> -->
  </view>
</template>
<script>
export default {
  deta() {
    return {
      userData: {
        product_name: '',
        sale_price: '',
        product_img: '',
        order_id: '',
        create_time: '',
        nickname: '',
        sex: '',
        mobile: '',
        avatar: '',
        user_id: '',
        order_id: '',
        videoid: '',
      },
    }
  },
  onLoad(options) {
    console.log(options);
    const parsedData = JSON.parse(decodeURIComponent(options.data));
    console.log(parsedData);
    let v = parsedData
    console.log(typeof v);
    console.log(v.product.product_name);
    this.userData.product_name = v.product.product_name;
    console.log(this.userData.product_name);
    // this.userData.sale_price = v.product.sale_price;
    // this.userData.product_img = v.product.product_img;
    // this.userData.order_id = v.product.order_id;
    // this.userData.create_time = v.create_time;
    // this.userData.nickname = v.user.nickname;
    // this.userData.sex = v.user.sex;
    // this.userData.mobile = v.user.mobile;
    // this.userData.avatar = v.user.avatar;
    // this.userData.user_id = v.user_id;
    // this.userData.order_id = v.order_id;
    // this.userData.videoid = v.videoid;

  }
}
</script>
<style scoped>
.popup-content {
  margin: 20rpx;
}

.goods-name {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  margin: 30rpx 0
}

.line {
  border-bottom: 1rpx dashed #eee;
  margin: 30rpx 0;
}

.order-num {
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.order-title {
  font-size: 28rpx;
}

.goods-price {
  font-size: 28rpx;
  color: #f00;
  font-weight: 600;
}

.user-img {
  text-align: center;
}

.avatar-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 100%;
}

.user-txt {
  font-size: 28rpx;
  margin: 10px 0;
}

.goods-box {
  display: flex;
  justify-content: space-between;
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
}

.img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
</style>